<template>
  <div class="book-detail-container">
    <!-- 图书基本信息 -->
    <div class="book-info">
      <h2>{{ book.title }}</h2>
      <p><strong>作者：</strong>{{ book.author }}</p>
      <p><strong>出版社：</strong>{{ book.publisher }}</p>
      <p><strong>出版日期：</strong>{{ book.publishDate }}</p>
      <p><strong>ISBN：</strong>{{ book.isbn }}</p>
      <p><strong>简介：</strong>{{ book.description }}</p>
    </div>

    <!-- 用户评价 -->
    <div class="user-reviews">
      <h3>用户评价</h3>
      <el-card v-for="(review, index) in reviews" :key="index" class="review-card">
        <p><strong>{{ review.user }}</strong></p>
        <p>{{ review.comment }}</p>
      </el-card>
    </div>

    <!-- 借阅按钮 -->
    <el-button type="primary" @click="openBorrowDialog">借阅</el-button>

    <!-- 分步借阅弹窗 -->
    <el-dialog v-model="borrowDialogVisible" title="借阅流程" width="50%">
      <el-steps :active="currentStep" finish-status="success" simple>
        <el-step title="书籍信息" description="确认书籍信息"></el-step>
        <el-step title="选择借阅时长" description="选择借书和还书日期"></el-step>
        <el-step title="完成借阅" description="确认借阅信息"></el-step>
      </el-steps>

      <div v-if="currentStep === 1" class="borrow-step">
        <h4>书籍信息</h4>
        <p><strong>书名：</strong>{{ book.title }}</p>
        <p><strong>作者：</strong>{{ book.author }}</p>
        <p><strong>ISBN：</strong>{{ book.isbn }}</p>
        <el-button type="success" @click="nextStep">下一步</el-button>
      </div>

      <div v-if="currentStep === 2" class="borrow-step">
        <h4>选择借阅时长</h4>
        <el-date-picker
          v-model="borrowDate"
          type="date"
          placeholder="选择借书日期"
        ></el-date-picker>
        <el-date-picker
          v-model="returnDate"
          type="date"
          placeholder="选择还书日期"
        ></el-date-picker>
        <el-button type="success" @click="nextStep">下一步</el-button>
      </div>

      <div v-if="currentStep === 3" class="borrow-step">
        <h4>确认借阅信息</h4>
        <p><strong>借书日期：</strong>{{ borrowDate }}</p>
        <p><strong>还书日期：</strong>{{ returnDate }}</p>
        <el-button type="success" @click="completeBorrow">完成借阅</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {ElMessage} from "element-plus";

const book = {
  title: "Vue.js 实战",
  author: "尤雨溪",
  publisher: "电子工业出版社",
  publishDate: "2023-01-01",
  isbn: "978-7-121-39000-1",
  description: "深入学习 Vue.js 的核心原理与实战技巧。",
};

const reviews = ref([
  { user: "张三", comment: "这本书非常实用，适合初学者！" },
  { user: "李四", comment: "内容很详细，推荐给大家！" },
]);

const borrowDialogVisible = ref(false);
const currentStep = ref(1);
const borrowDate = ref(null);
const returnDate = ref(null);

const openBorrowDialog = () => {
  borrowDialogVisible.value = true;
  currentStep.value = 1;
};

const nextStep = () => {
  if (currentStep.value === 2 && (!borrowDate.value || !returnDate.value)) {
    ElMessage.error("请选择借书和还书日期！");
  } else {
    currentStep.value += 1;
  }
};

const completeBorrow = () => {
  if (borrowDate.value && returnDate.value) {
    if (new Date(borrowDate.value) < new Date(returnDate.value)) {
      ElMessage.success("借阅成功！");
      borrowDialogVisible.value = false;
    } else {
      ElMessage.error("借书日期必须早于还书日期！");
    }
  } else {
    ElMessage.error("请选择借书和还书日期！");
  }
};
</script>

<style scoped>
.book-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.book-info {
  margin-bottom: 20px;
}

.user-reviews {
  margin-bottom: 20px;
}

.review-card {
  margin-bottom: 10px;
}

.borrow-step {
  text-align: center;
}

.el-button {
  display: block;
  margin: 20px auto;
}

.el-date-picker {
  margin-bottom: 10px;
}
</style>